// namespace: "Login" 
<template>
  <div class="login">
    <div class="login-container">
      <h2>用户登录</h2>
      <el-form
        :model="loginForm"
        ref="login-form"
        :rules="loginRules"
        label-width="100px"
        class="login-ruleForm"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="loginForm.email"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="submitForm('login-form')">登录</el-button>

          <div class="forgetPassword">
            尚无账号？
            <a @click.prevent="toRegister" class="cursor-pointer">前往注册</a>
          </div>
          <div class="forgetPassword">
            忘记密码？
            <a @click.prevent="toForget">立即找回</a>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
// 定义表单数据类型
import { defineComponent, getCurrentInstance, ref } from "vue";
import { useRouter, useRoute } from "vue-router";

// 引入interface里login的数据
import { loginForm, loginRules, resetLoginForm } from "../interface/login";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "Login",

  // vue3删除了该组件守卫
  // 所以目前暂时使用vue2的
  beforeRouteEnter(to, from, next) {
    //@ts-ignore
    next(vm => vm.setBack(from.path));
  },
  data() {
    return {
      // 登录完成 需要跳转到的路径
      routerBack: "/"
    };
  },
  methods: {
    // 返回的来时的地址不能是注册地址
    setBack(val: string) {
      this.routerBack = val == "/register" ? "/" : val;
    }
  },
  setup() {
    // 获取ctx 当作this使用
    // ! 使用 @ts-ignore 来忽略ctx的类型 因为是插件给的变量，无从限制类型
    // @ts-ignore
    const { ctx } = getCurrentInstance();

    // 点击登录  校验非空
    const submitForm = (formName: string) => {
      ctx.$refs[formName].validate((valid: any) => {
        if (valid) {
          login();
        } else {
          ElMessage.error("填写有误，请检查后重试！！");
          return false;
        }
      });
    };

    // 登录账号
    const login = () => {
      ctx
        .$axios({
          method: "get",
          url: "/serverApi/login",
          params: {
            password: loginForm.password,
            email: loginForm.email,
            username: loginForm.username
          }
        })
        .then((result: any) => {
          const { code, msg, data } = result;
          if (code === 200) {
            ElMessage.success({
              message: "登录成功，即将跳转",
              type: result.msg
            });
            // 登录成功 清空表单 跳转页面
            setTimeout(() => {
              resetLoginForm();
              router.push(`${ctx.routerBack}`);
            }, 500);
          } else {
            ElMessage.error(result.msg);
          }
        })
        .catch((err: Error) => {
          console.log("登录 Error", err);
        });
    };

    // 获取路由注册表
    const router = useRouter();

    // 前往注册页面
    const toRegister = () => {
      router.push("/register");
    };

    // 前往忘记密码页面
    const toForget = () => {
      router.push("/forget");
    };
    return { loginForm, loginRules, submitForm, toRegister, toForget };
  }
});
</script>
<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  background-image: url("../assets/image/login_bg.png");
  .login-container {
    margin-right: 100px;
    padding-top: 200px;
    width: 620px;
    h2 {
      color: #fff;
    }
    .login-ruleForm {
      padding: 20px 20px 0 0;
      border: 1px solid #cccccc;
      border-radius: 8px;
    }
  }
}
</style>

<style lang="scss" >
.login-container {
  .login-ruleForm {
    label {
      color: #fff;
    }
  }
  .btns .el-form-item__content {
    display: flex;
    .forgetPassword {
      margin-left: 60px;
      color: #fff;
      // margin-left: 290px;
      a {
        color: #409eff;
        cursor: pointer;
      }
    }
  }
}
</style>